<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定菜品属性</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/Theme1/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/style.min.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg" onload="load()">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>
                        绑定菜品属性
                    </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form method="post" action="__URL__/save_attributes" class="form-horizontal">
                        <input type="hidden" name="id" value="{$result.id}">
                        <input type="hidden" name="attribute_value" id="attribute_value" value="{$result.attribute_value}">
                        <input type="hidden" name="attribute_value_name" id="attribute_value_name" value="{$result.attribute_value_name}">
                        <input type="hidden" name="attribute_value_price" id="attribute_value_price" value="{$result.attribute_value_price}">
                        <input type="hidden" id="is_need" value="{$result.is_need}">
                        <input type="hidden" id="categoryId" value="{$result.category_id}">
                        <input type="hidden" id="dishId" value="{$result.dish_id}">

                        <div class="form-group">
                            <!--店铺-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">店铺名称</label>
                             <div class="col-sm-4">
                                <select id="store" name="store_id" class="form-control" required onchange="getStore()">
                                    <option value="0" >请选择..</option>
                                    <volist name="store" id="vo">
                                        <option value="{$vo['store_id']}" >{$vo['store_name']}</option>
                                    </volist>
                                </select>
                            </div>
                            </div>
                            <!--分类-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">菜品分类</label>
                            <div class="col-sm-4">
                                <select id="category" name="category_id" class="form-control" required onchange="getselect()">
                                    <option value="0" >请选择..</option>
                                    <volist name="category" id="vo">
                                        <option value="{$vo['id']}" >{$vo['name']}</option>
                                    </volist>
                                </select>
                            </div>
                            </div>
                            <!--菜品-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">菜品名称</label>
                            <div class="col-sm-4">
                                <select id="dish" class="form-control" required name="dish_id">
                                    <option value="0" >请选择..</option>
                                    <if condition="values neq ''">
                                        <volist name="values" id="v">
                                            <option value="{$v['id']}" >{$v['name']}</option>
                                        </volist>
                                    </if>
                                </select>
                            </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否可选</label>
                            <div class="col-sm-1">
                                <input type="radio" value="2" name="is_need" checked="checked">必选</input>
                            </div>
                            <div class="col-sm-1">
                                <input type="radio" value="1" name="is_need">可选</input>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">属性名</label>

                            <volist name="dish" id="vo">
                                <div class="col-sm-1">
                                    <input type="radio" name="attribute_id" attrName="{$vo['name_attribute']}" value="{$vo['id']}" <if condition = "$vo['id'] eq $result['attribute_id']"> checked </if> onchange="getsecond('{$vo[\'id\']}')">{$vo['name_attribute']}<br>
                                </div>
                            </volist>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">属性值</label>
                            <div class="col-sm-5" id="attributeValue">
                                <div class="col-sm-2">
                                    <if condition="values neq ''">
                                        <volist name="values" id="v">
                                            <input name="all" onclick="changeValue()" type="checkbox" value="{$v['id']}"/>
                                        </volist>
                                    </if>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存</button>
                                <a class="btn btn-white" href="{:U('Admin/Good/select_attributes_list')}">返回</a>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="__PUBLIC__/Theme1/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/Theme1/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/Theme1/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/Theme1/js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})});

    var is_need = document.getElementById("is_need").value;
    $("input[name='is_need'][value='"+is_need+"'").attr("checked",true);
    var categoryId = document.getElementById("categoryId").value;

    $("#category option[value='"+categoryId+"']").attr("selected","selected");

    var dishId = document.getElementById("dishId").value;
    $("#dish option[value='"+dishId+"']").attr("selected","selected");

    var attribute_id = $("input[name='attribute_id']:checked").val();

    function load() {
        var attribute_id = $("input[name='attribute_id']:checked").val();
        var attribute_value = $("#attribute_value").val();
        $.ajax({
            url: "index.php/Admin/Good/get_attributes?attributeId="+attribute_id,
            data: {"attributeId": attribute_id},
            dataType: 'json',
            type: "post",
            success: function (data) {
                if (data.state == 1) {
                    var chkhtml = [];
                    var tt = eval(data.result);
                    var array = attribute_value.split(",")
                    console.log(tt)
                    for (var i = 0;i<tt.length;i++) {
                        var thisItem = tt[i].id.toString();
                        //选中的标记为 checked in_array
                        if($.inArray( thisItem, array ) != -1){
                            //符合
                            chkhtml.push('<div class="col-sm-2" id="check">' +
                                '<input name="all" onclick="changeValue()" valName="'+tt[i].value+'" valPrice="'+tt[i].price+'" type="checkbox" checked value="'+tt[i].id+'"/>' +
                                '<label>'+tt[i].value+tt[i].price+'</label></div>')
                        }else{
                            chkhtml.push('<div class="col-sm-2" id="check">' +
                                '<input name="all" onclick="changeValue()" valName="'+tt[i].value+'" type="checkbox"  valPrice="'+tt[i].price+'" value="'+tt[i].id+'"/>' +
                                '<label>'+tt[i].value+tt[i].price+'</label></div>');
                        }
                    }
                    $("#attributeValue").html(chkhtml);
                }else if (data.state == 0) {
                    alert("失败!");
                }
            }
        })

    }

    function getsecond(id){
        $.ajax({
            url: "index.php/Admin/Good/get_attributes?attributeId="+id,
            data: {"attributeId": id},
            dataType: 'json',
            type: "post",
            success: function (data) {
                if (data.state == 1) {
                    var chkhtml = [];
                    var pricehtml = [];
                    var tt = eval(data.result);
                    for (var i = 0;i<tt.length;i++) {
                        chkhtml.push('<div class="col-sm-2">' +
                            '<input name="all" onclick="changeValue()" type="checkbox" valName="'+tt[i].value+'" valPrice="'+tt[i].price+'" value="'+tt[i].id+'"/>' +
                            '<label>'+tt[i].value+tt[i].price+'</label></div>');

                    }
                    $("#attributeValue").html(chkhtml);

                }else if (data.state == 0) {
                    alert("失败!");
                }
            }
        })
    }

    function changeValue() {
        var all = "";
        var a = "";
        var price = "";
        $("input:checkbox[name='all']:checked").each(function() {
            all += $(this).val() + ",";
            a += $(this).attr("valName")+ ",";
            price += $(this).attr("valPrice")+ ",";
        });
        $("#attribute_value_name").val(a)
        $("#attribute_value").val(all)
        $("#attribute_value_price").val(price)
    }

    function getselect() {
        var category = $("#category option:selected").attr("value");
        $.ajax({
            url: "index.php/Admin/Good/get_dish?category="+category,
            data: {"category": category},
            dataType: 'json',
            type: "post",
            success: function (data) {
                if (data.state == 1) {
                    var dish = document.getElementById("dish")   //获取二级
                    var length = dish.options.length;
                    if(length >0){              //去除二级的<optioin>的属性值
                        for( var j=0;j<length;j++){
                            dish.options.remove(0)
                        }
                    }
                    var tt = eval(data.dish);     //这边是以json格式返回的，所以要转为数组
                    for(var i = 0;i<tt.length;i++){         //创建二级的<option>
                        addoption(tt[i].id,tt[i].name)
                    }

                }else if (data.state == 0) {
                    alert("失败!");
                }
            }
        })
    }

    function addoption(value,text){
        var opt = document.createElement("option")
        opt.value = value
        opt.text = text
        dish.options.add(opt)
    }


</script>
</body>
</html>